<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css"   />
        <link rel="stylesheet" href="../../res/css/mz.css" />
        <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js" ></script>
        <script src="../../res/js/mz.list.js"></script>
        <script src="../../res/js/mz.common.js"></script>
        <style>
            .layui-layer-dialog .layui-layer-content{padding: 0px;}
            .run_text {width: 600px; height: 500px;}
            .run_text textarea{display:block; width: 100%; height: 100%; border: 2px solid #F8F8F8; border-top-width: 0; padding: 10px; line-height:20px; overflow:auto; background-color: #3F3F3F; color: #eee; font-size:12px; font-family:Courier New;}
        </style>
    </head>
    <body>

        <br><br>

        <div style=" margin: 10px auto;">
            <a class="layui-btn layui-btn-success" href="edit.html"><i class="layui-icon layui-icon-addition"></i>新增</a>
        </div>

        <div style=" margin: 10px auto;">
            <table id="table_view"></table>
        </div>

        <script type="text/html" id="operationDemo">
            <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view">查看</a>-->
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="work">处理</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">删除</a>
        </script>

        <script>

            var field_setting = [
                {title: '编号', field: 'id', type: 'text', width: 350},
                {title: '命令', field: 'cmd', type: 'text'}
            ];

            field_setting.unshift({type: 'checkbox'});

            field_setting.push({fixed: 'right', title: '操作', width: 220, align:'center', toolbar: '#operationDemo'});

            new MZList({
                elem: '#table_view',
                url: base_url + '/cmd_page', //数据接口
                cols: [field_setting],
                toolbarEvents: {
                    view: {url: 'view.html'},
                    edit: {url: 'edit.html'},
                    remove: {url: base_url + '/cmd_delete'}
                }
            }).bind('operation', function(obj){

                var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值

                if('work' == layEvent){
                    doWork(data.id);
                }

            });



            window.thr_txt = ['.', '..', '...', '....'];
            function doWork(workId) {
                clearInterval(window.thr);

                layui.layer.open({title: '结果', content: '<div class="run_text"><textarea id="info">执行中</textarea></div>', btn: []});
                layui.$.post( base_context + '/cmd/doWork', {id: workId}, function (data) {
                    clearInterval(window.thr);
                    layui.$("#info").val(data);
                })

                window.thr_cnt = 0;
                window.thr = setInterval(function () {
                    layui.$("#info").val('执行中' + window.thr_txt[window.thr_cnt]);
                    window.thr_cnt += 1;
                    window.thr_cnt = window.thr_cnt % 3;
                }, 800)
            }

        </script>

    </body>
</html>
